<template>
  <div class="count-down">
    <div class="count-down__container">
      <span class="count-down__message">{{seconds}}s</span>
      <div class="count-down__round-container">
        <div class="count-down__round" v-for="i in 5" :key="i" :class="{active: i <= active}"></div>
      </div>
    </div>
  </div>
</template>

<script>
const req = require.context('@/assets/images/head-logo', true, /\.png$/)

console.log(req)

export default {
  name: 'CountDown',
  data() {
    return {
      active: 1,
      seconds: 60
    }
  },
  mounted() {
    this.roundInterval = setInterval(() => {
      if (this.active === 5) {
        this.active = 1
      } else {
        this.active++
      }
    }, 500)

    this.secondsInterval = setInterval(() => {
      if (this.seconds === 0) {
        clearInterval(this.secondsInterval)
      } else {
        this.seconds--
      }
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.roundInterval)
    clearInterval(this.secondsInterval)
  },
  methods: {
    initSecond() {
      this.seconds = 60
    }
  }
}
</script>

<style lang="scss" scoped>
.count-down {
  .count-down__container {
    width: 100%;
    height: 300px;
    background-image: url('~@/assets/images/countdown.png');
    background-repeat: no-repeat;
    position: relative;
    background-position: center;
  }
  .count-down__round-container {
    position: absolute;
    top: 30%;
    left: 51%;
    transform: translate(-50%, 50px);
  }
  .count-down__message {
    color: rgb(36, 124, 241);
    position: absolute;
    font-size: 18px;
    left: 51%;
    top: 110px;
    transform: translateX(-50%);
  }
  .count-down__round {
    border-radius: 50%;
    display: inline-block;
    margin: 0 7px;
    width: 8px;
    height: 8px;
    border-color: rgb(36, 124, 241);
    border-width: 2.5px;
    border-style: solid;
    &.active {
      background-color: rgb(36, 124, 241);
    }
  }
}
</style>
